<template>
    <div class="other-info-page">
        <!--        <van-cell title="Have you lived in Hubei Province or been to Hubei Province in the last 14 days？" />-->
        <!--        <van-field name="is_hubei" :rules="[{ required: true, message: 'Please select.' }]">-->
        <!--            <template #input>-->
        <!--                <van-radio-group v-model="formItem.is_hubei" direction="horizontal">-->
        <!--                    <van-radio name="1" icon-size="22px">Yes</van-radio>-->
        <!--                    <van-radio name="0" icon-size="22px">No</van-radio>-->
        <!--                </van-radio-group>-->
        <!--            </template>-->
        <!--        </van-field>-->
        <div class="van-cell">
            <div class="van-cell__title">
                <span>
                    {{ld.recent.isContact.label[languageType]}}
                </span>
                <span style="color: red">
                    {{ld.recent.isContact.label2[languageType]}}
                </span>
            </div>
        </div>
        <van-field name="is_contact">
            <template #input>
                <van-radio-group v-model="formItem.is_contact" @change="isContactAction" direction="horizontal">
                    <van-radio name="1" icon-size="22px">{{ld.recent.isContact.val1[languageType]}}</van-radio>
                    <van-radio name="0" icon-size="22px">{{ld.recent.isContact.val2[languageType]}}</van-radio>
                    <!--<van-radio name="2" icon-size="22px">不确定</van-radio>-->
                </van-radio-group>
            </template>
        </van-field>
        <van-cell :title="ld.recent.healthState.label[languageType]"/>
        <van-field name="health_state_copy">
            <template #input>
                <van-checkbox-group v-model="formItem.health_state_copy" icon-size="22px">
                    <van-checkbox @click="healthChange('1')" shape="square" name="1">
                        {{ld.recent.healthState.val1[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('2')" shape="square" name="2">
                        {{ld.recent.healthState.val2[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('3')" shape="square" name="3">
                        {{ld.recent.healthState.val3[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('4')" shape="square" name="4">
                        {{ld.recent.healthState.val4[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('5')" shape="square" name="5">
                        {{ld.recent.healthState.val5[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('6')" shape="square" name="6">
                        {{ld.recent.healthState.val6[languageType]}}
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('7')" shape="square" name="7">
                        {{ld.recent.healthState.val7[languageType]}}
                    </van-checkbox>
                </van-checkbox-group>
            </template>
        </van-field>

        <van-field
                v-model="formItem.temp"
                name="temp"
                :label="ld.recent.temp.label[languageType]"
                :placeholder="ld.recent.temp.ph[languageType]"
                :maxlength="4"
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"
                :rules="[{ validator: tempValidator,required: true }]"></van-field>

        <van-field
                v-model="formItem.stay_city"
                name="stay_city"
                :label="ld.recent.stayCity.label[languageType]"
                rows="1"
                autosize
                type="textarea"
                :placeholder="ld.recent.stayCity.ph[languageType]"
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"></van-field>

    </div>
</template>

<script>
import languageDist from '@/libs/languageDist'
import { Dialog } from 'vant'

export default {
  name: 'RecentSituation',
  data () {
    return {
      formItem: {
        is_hubei: '',
        is_contact: '',
        health_state_copy: [],
        temp: '',
        stay_city: ''
      },
      healthDisabled: false,
      showArea: false,
      ld: languageDist
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    languageType: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  computed: {},
  methods: {
    bodyScrollTop () {
      winToTop()
      // document.body && (document.body.scrollTop = 0)
      this.setStorage(this.formItem)
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    tempValidator (val) {
      const reg = /^((3[5-9])|4[0-1]).\d|((3[5-9])|4[0-2])$/
      // let num = parseFloat(val).toFixed(1)
      // if (num < 35 || num > 42) {
      if (!reg.test(val)) {
        this.failNotice(this.ld.recent.temp.msg2[this.languageType])
        return false
      }
      return true
    },
    healthChange (val) {
      if (val === '1') {
        let str = this.formItem.health_state_copy.toString()
        if (str.indexOf('1') >= 0) {
          this.healthDisabled = false
        } else {
          this.healthDisabled = true
          this.formItem.health_state_copy = ['1']
        }
      } else {
        if (this.healthDisabled) {
          this.formItem.health_state_copy = ['1']
        } else {
          this.healthDisabled = false
        }
      }
    },
    checkForm () {
      // if (this.formItem.is_hubei === '') {
      //  this.failNotice('Please choose whether you have ever lived in or visited Hubei province.')
      //  return false
      // }
      if (this.formItem.is_contact === '') {
        this.failNotice(this.ld.recent.isContact.msg[this.languageType])
        return false
      }
      if (this.formItem.health_state_copy.length === 0) {
        this.failNotice(this.ld.recent.healthState.msg[this.languageType])
        return false
      }
      if (!this.formItem.temp) {
        this.failNotice(this.ld.recent.temp.msg[this.languageType])
        return false
      }
      if (!this.formItem.stay_city) {
        this.failNotice(this.ld.recent.stayCity.msg[this.languageType])
        return false
      }
      return this.formItem
    },
    autoHandle () {
      this.formItem.health_state_copy = this.formData.health_state.toString().split('^')
      this.formItem.is_hubei = this.formData.is_hubei
      this.formItem.is_contact = this.formData.is_contact
      this.formItem.temp = this.formData.temp
      this.formItem.stay_city = this.formData.stay_city
      // console.log('组件内处理', this.formItem)
    },
    isContactAction () {
      if (this.formItem.is_contact.toString() === '1') {
        Dialog.alert({
          title: this.ld.recent.confirm.title[this.languageType],
          message: '<span style="color:red;">' + this.ld.recent.confirm.msg[this.languageType] + '</span>'
        })
      }
    }
  },
  watch: {
    formData (val) {
      // console.log('其它信息组件内部表单`', val)
      this.autoHandle()
    }
  }
}
</script>

<style scoped>
    .other-info-page >>> .van-field__label {
        min-width: 5.625rem;
        margin-right: 10px;
        width: auto;
    }

    /deep/ .van-radio {
        margin-bottom: 8px;
    }

    /deep/ .van-checkbox {
        margin-bottom: 8px;
    }

    .other-info-page >>> .van-field:last-child .van-field__label {
        width: 50%;
    }
</style>
